<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<head th:include="public/public_css::public_css ('拣货任务')" />

<body style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
                <form class="layui-form layui-card-header  layui-card-header-auto" id="searchForm">
                    <div class="layui-inline">
                        <label class="layui-form-label">订单号</label>
                        <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="khddh" id="khddh" placeholder="请输入订单号" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">波次编号</label>
                        <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="bcbh" id="bcbh" placeholder="请输入波次编号" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发运单号</label>
                        <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="fybh" id="fybh" placeholder="请输入发运单号" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">生成状态</label>
                        <select id="jhrwzt" name="jhrwzt" class="selector" lay-filter="aihao">
                            <option value="" >全部</option>
                            <option value="0">初始</option>
                            <option value="1" >部分生成</option>
                            <option value="2">全部生成</option>
                        </select>
                    </div>
                    <div class="layui-inline inline-search-btn">
                        <a class="layui-btn layui-btn-normal" onclick="queryTable(1)" id="query" data-type="reload">查询</a>
                    </div>
                    <div class="layui-inline inline-reset-btn">
                        <button type="reset" class="layui-btn layui-btn-normal"  onclick="queryTable(0)">重置</button>
                    </div>
                    <div class="moreSearch" style="display: none">
                        <div class="layui-inline">
                            <label class="layui-form-label">联系方式</label>
                            <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="lxrdh" id="lxrdh" placeholder="请输入联系方式" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="time" id="cjsj" placeholder=" - ">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">客户名称</label>
                            <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="khmc" id="khmc" placeholder="请输入客户名称" />
                            </div>
                        </div>
                    </div>
                    <div class="moreBtn"><i class="layui-icon layui-icon-triangle-d" style="color: #1E9FFF;"></i></div>
                </form>
            <!--顶部按钮展示区域 【 tpl-button 】 -->
            <div class="group-button tpl-button" id="toolbar"></div>
            <!--列表-->
            <section class="panel panel-padding layui-card-body">
                <div class="pro">
                    <table id="table" class="table text-nowrap"></table>
                </div>
            </section>
        </div>
    </div>
    </div>
</div>

</body>
<div th:include="public/public_js::public_js"></div>
<div th:include="public/public_btn::public_btn"></div>
<style type="text/css">
    .moreBtn{
        width:50px;
        height:20px;
        text-align:center;
        color:#fff;
        line-height:20px;
        background-color:#eee;
        position:relative;
        margin: 0 auto;
        cursor: pointer;
    }
    .moreBtn:before{
        content:'';
        display:block;
        width:35px;
        height:20px;
        position:absolute;
        transform:skewX(30deg);
        background:#eee;
        border-top-left-radius:8px;
        left:-20px;
        top:0;
    }
    .moreBtn:after{
        content:'';
        display:block;
        width:35px;
        height:20px;
        position:absolute;
        transform:skewX(-30deg);
        background:#eee;
        border-top-right-radius:8px;
        top:0;
        right:-20px;
    }
</style>
<script th:inline="javascript">
    $(function () {
        $(".moreBtn").on("click",function () {
            $(".moreSearch").toggle();
        })
    });
    var functions = [[${functions}]];
    layui.use(['list', 'layer', 'zzpUtils', 'jquery', 'laydate', 'tablebutton'], function () {
        var zzpUtils= layui.zzpUtils,
            $ = layui.jquery,
            laydate = layui.laydate,
            tablebtn = layui.tablebutton;
        tablebtn.buildOnClick({
            type: 1,
            temp: $("#function_tpl"),
            functions: functions.headBtn,
            row: null,
            event: {
                searchEvent: function(){
                    zzpUtils.refreshTable("#table");
                },
                /*查看*/
                getEvent: function (data) {
                        getDialog(data);
                },
                /*打印*/
                printEvent: function (data) {
                    if (data.row != undefined) {
                        var ids = [];
                        ids.push(data.row.ssydid)
                        printDialog(ids);
                    } else {
                        var arr = [];
                        var $rows = $table.bootstrapTable('getSelections');
                        if ($rows.length > 0) {
                            arr = $.map($rows, function (row) {
                                return row.ssydid;
                            })
                            printDialog(arr);
                        }else{
                            layer.msg("至少选择一条数据");
                        }
                    }
                },
                /*生成*/
                generateEvent: function (data) {
                    generateDialog(data);
                },
            }
        });
        //初始化
        zzpUtils.webSocket.init();
        //查看
        function getDialog(data){
            var ssydid=data.row.ssydid;
            var zzpUtils = layui.zzpUtils,
                $ = layui.jquery,
                laydate = layui.laydate

            zzpUtils.dialog({
                title: "查看拣货任务人员",
                type: 2,
                content: "/pickingTask/selectPickingTask?ssydid=" + ssydid,
                area: ['70%', '80%'], //设置dialog大小，也可以不设置，
            });
        }
        function printDialog(ids){
            zzpUtils.confirm("您将打印选择的拣货任务", function (index) {
                zzpUtils.action({
                    url: "/wmspicking/printPicking" ,
                    data: JSON.stringify({ids:ids}),
                    success: function (data) {
                        var LODOP=getLodop();
                        LODOP.PRINT_INIT('打印拣货任务');
                        for(var i=0;i<data.rows.length;i++){
                            LODOP.ADD_PRINT_TEXT(110,34,100,30,"发运单号");
                            LODOP.ADD_PRINT_TEXT(110,100,307,30,data.rows[i].shippingNum);
                            LODOP.ADD_PRINT_TEXT(140,34,100,30,"客户名称");
                            LODOP.ADD_PRINT_TEXT(140,100,307,30,data.rows[i].customer);
                            LODOP.ADD_PRINT_TEXT(170,34,100,30,"联系人");
                            LODOP.ADD_PRINT_TEXT(170,100,307,30,data.rows[i].contacts);
                            LODOP.ADD_PRINT_TEXT(200,34,100,30,"联系电话");
                            LODOP.ADD_PRINT_TEXT(200,100,307,30,data.rows[i].tel);
                            LODOP.ADD_PRINT_TEXT(210,34,100,30,"地址");
                            LODOP.ADD_PRINT_TEXT(210,100,307,30,data.rows[i].address);
                            LODOP.ADD_PRINT_TEXT(230,34,307,30,"总体积");
                            LODOP.ADD_PRINT_TEXT(230,100,307,30,data.rows[i].totalVolume);
                            LODOP.ADD_PRINT_TEXT(250,34,307,30,"总重量");
                            LODOP.ADD_PRINT_TEXT(250,100,307,30,data.rows[i].totalWeight);
                            LODOP.ADD_PRINT_TEXT(270,34,307,30,"打印时间");
                            LODOP.ADD_PRINT_TEXT(270,100,307,30,data.rows[i].printTime);
                            LODOP.ADD_PRINT_TEXT(290,34,307,30,"集货库位");
                            LODOP.ADD_PRINT_TEXT(290,100,307,30,data.rows[i].library);
                            LODOP.ADD_PRINT_TEXT(310,34,307,30,"路线");
                            LODOP.ADD_PRINT_TEXT(310,100,307,30,data.rows[i].route);
                            var trs='';
                            for(var j=0;j<data.rows[i].wmsPrintPickingDetailList.length;j++){
                                trs+='<tr>\n' +
                                    '<td width="150px"  style="border: 1px solid #000;height:18px"><b>'+(j+1)+'</b></td>\n' +
                                    '<td width="220px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].libraryName+'</b></td>\n' +
                                    '<td width="220px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].goodsNum+'</b></td>\n' +
                                    '<td width="260px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].goodsName+'</b></td>\n' +
                                    '<td width="180px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].goodsBatch+'</b></td>\n' +
                                    '<td width="180px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].productionTime+'</b></td>\n' +
                                    '<td width="180px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].supplier+'</b></td>\n' +
                                    '<td width="220px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].pickMainUnit+'</b></td>\n' +
                                    '<td width="220px" style="border: 1px solid #000;height:18px"><b>'+data.rows[i].wmsPrintPickingDetailList[j].pickBoxUnit+'</b></td>\n' +
                                    '</tr>';
                            }
                            LODOP.ADD_PRINT_TABLE(334, 125, 500, 280,'<table border=0 cellSpacing=0 cellPadding=0  width="100%">\n' +
                                '                  <tr>\n' +
                                '                    <td width="150px"  style="border: 1px solid #000;height:18px"><b>序号</b></td>\n' +
                                '                    <td width="220px" style="border: 1px solid #000;height:18px"><b>库位名称</b></td>\n' +
                                '                    <td width="220px" style="border: 1px solid #000;height:18px"><b>货品编号</b></td>\n' +
                                '                    <td width="260px" style="border: 1px solid #000;height:18px"><b>货品名称</b></td>\n' +
                                '                    <td width="180px"  style="border: 1px solid #000;height:18px"><b>货品批次</b></td>\n' +
                                '                    <td width="180px" style="border: 1px solid #000;height:18px"><b>生产日期</b></td>\n' +
                                '                    <td width="180px" style="border: 1px solid #000;height:18px"><b>供应商</b></td>\n' +
                                '                    <td width="220px" style="border: 1px solid #000;height:18px"><b>拣货数量(主单位)</b></td>\n' +
                                '                    <td width="220px" style="border: 1px solid #000;height:18px"><b>拣货数量(箱单位)</b></td>\n' +
                                '\n' +
                                '                  </tr>'+ trs+'<tfoot>\n' +
                                '                  <tr>\n' +
                                '                  <th colspan="3" style="border: none; height: 50px">操作人</th>\n' +
                                '                  <th colspan="3" style="border: none; height: 50px">记录人</th>\n' +
                                '                  <th colspan="3" style="border: none; height: 50px">核对人</th>\n' +
                                '                  </tr>\n' +
                                '\n' +
                                '                  </tfoot></table>');
                            if(i>=0){
                                LODOP.NewPage();//分页
                            }
                        }
                        LODOP.PREVIEW();

                    }, error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            })
            return false;
        }
        //生成
        function generateDialog(data){
            var ssydid=data.row.ssydid;
            var zzpUtils = layui.zzpUtils,
                $ = layui.jquery,
                laydate = layui.laydate;
            zzpUtils.dialog({
                title: "下发拣货任务",
                type: 2,
                content: "/pickingTask/createPickingTask?ssydid=" + ssydid,
                area: ['35%', '35%'], //设置dialog大小，也可以不设置，
            });
        }
        laydate.render({
            elem: '#cjsj'
            ,range: true
        });
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            isOperate: true,
            tableField: 'ssydid',
            pagination: true,
            url: '/wmspicking/pickingTaskList',
            columns: [{
                field: '',
                checkbox: true
            }, {
                field: 'bcbh',
                title: '波次编号'
            },{
                field: 'ddqdmc',
                title: '订单渠道'
            },{
                field: 'fybh',
                title: '发运单号'
            },{
                field: 'show_fylx',
                title: '订单类型',
            },{
                field: 'show_fyzt',
                title: '订单状态'
            },{
                field: 'show_jhrwzt',
                title: '任务状态'
            },{
                field: 'khbh',
                title: '客户编号',
                visible: false
            },{
                field: 'khmc',
                title: '客户名称',
                visible: false
            },{
                field: 'lxrxm',
                title: '联系人',
                visible: false
            }, {
                field: 'lxrdh',
                title: '联系人电话',
                visible: false
            }, {
                field: 'khdz',
                title: '客户地址',
                visible: false
            }, {
                field: 'khddh',
                title: '客户订单号',
                visible: false
            }, {
                field: 'cjsj',
                title: '创建时间',
                visible: false
            }, {
                field: 'show_cdzt',
                title: '拆单状态',
                visible: false
            }, {
                field: 'show_zxzt',
                title: '装箱状态',
                visible: false
            }, {
                field: 'show_jhzt',
                title: '拣货状态',
                visible: false
            }, {
                field: 'show_bczt',
                title: '波次状态',
                visible: false
            }, {
                field: 'show_jhfs',
                title: '交货方式',
                visible: false
            }, {
                field: 'show_dpczt',
                title: '批次状态',
                visible: false
            }],
            queryParams: function () {//查询条件
                return  zzpUtils.getFormJson($("#searchForm"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            },
            /*定义表格右侧按钮*/
            operateFormatter: operateFormatter
        });
        /*表格右侧按钮*/
        function operateFormatter(value, row, index) {
            var button = '';
            for (var i = 0; i < functions.tableBtn.length; i++) {
                var btn = '<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="' + functions.tableBtn[i].event + '">' +functions.tableBtn[i].name + '</button>';

                if (row.fyzt == '1'||row.fyzt =='2'&&row.jhrwzt == '0'||row.jhrwzt == '1'&&row.jhzt == '0'||row.jhzt =='1') {
                    button += btn;
                }else{
                    if (functions.tableBtn[i].name == '查看'||functions.tableBtn[i].name == '打印') {
                        button += btn;
                    }
                }
            }
            button += '</span>'
                + '</div>';
            return button;
        }
        window.queryTable = function (val) {
            var formdata = $("form").serializeArray();
            var Datas = {};
            var cjsjstart = '',cjsjend = '';
            formdata.forEach(function (item) {
                Datas[item.name] = item.value;
            });
            if (Datas.time) {
                var start = Datas.time.substring(0, 10);
                var end = Datas.time.substring(12);
                var timestart = new Date(start);
                cjsjstart = timestart.getTime();
                var timeend = new Date(end);
                cjsjend = timeend.getTime();
            }
            var DATA = {};
            for (var key in Datas) {
                if(key !== 'time') {
                    if (val === 1) {
                        DATA[key] = Datas[key];
                    }else {
                        DATA[key] = "";
                    }
                }
            }
            if (val === 1) {
                DATA.cjsj_start = cjsjstart;
                DATA.cjsj_end = cjsjend;
            }else {
                DATA.cjsj_start = "";
                DATA.cjsj_end = "";
            }
            DATA.page = 1;
            DATA.rows = 10;
            $('#table').bootstrapTable('refresh',{
                query: DATA
            })
        }
    });
</script>
</html>